<div class="mdc-form-field"
     [class.mdc-form-field--align-end]="labelPosition == 'before'">
  <div class="mdc-switch" #switch>
    <div class="mdc-switch__track"></div>
    <div class="mdc-switch__thumb-underlay">
      <div class="mat-mdc-slide-toggle-ripple mat-mdc-focus-indicator" mat-ripple
        [matRippleTrigger]="switch"
        [matRippleDisabled]="disableRipple || disabled"
        [matRippleCentered]="true"
        [matRippleRadius]="24"
        [matRippleAnimation]="_rippleAnimation"></div>
      <div class="mdc-switch__thumb">
          <input #input class="mdc-switch__native-control" type="checkbox"
            role="switch"
            [id]="inputId"
            [required]="required"
            [tabIndex]="tabIndex"
            [checked]="checked"
            [disabled]="disabled"
            [attr.name]="name"
            [attr.aria-checked]="checked.toString()"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            (change)="_onChangeEvent($event)"
            (click)="_onInputClick($event)"
            (blur)="_onBlur()"
            (focus)="_focused = true">
      </div>
    </div>
  </div>

  <label [for]="inputId" (click)="$event.stopPropagation()">
    <ng-content></ng-content>
  </label>
</div>
